<template>
  <br />
  state.foo
  <input type="text" v-model="state.foo" />
  <br />
  state.bar
  <input type="text" v-model="state.bar" />
  <br />
  ...stateAsRefs.foo
  <input type="text" v-model="foo" />
  <br />
  ...stateAsRefs.bar
  <input type="text" v-model="bar" />
  <button @click="addone">stateAsRefs.foo+1</button>
  <br />
  stateAsRefs.stuent.age
  <input type="text" v-model="stateAsRefs.student.value.age" />{{
    stateAsRefs.student._object.student.age
  }}
</template>
<script lang="ts">
// https://www.cnblogs.com/yingliyu/p/14267394.html
import { reactive, toRefs } from "vue";
export default {
  setup() {
    // 创建一个响应式对象state
    const state = reactive({
      foo: 1,
      bar: 2,
      student: { id: "11", age: 40 },
    });
    const addone = () => {
      stateAsRefs.foo.value++;
    };
    // const foo = toRef(state, "foo");
    // const bar = toRef(state, "bar");
    // bar.value=12312312313123;

    // 当我们希望对象的多个属性都变成响应式数据，
    // 并且要求响应式数据和原始数据相关联，
    // 这时候toRefs()就派上用场了，它用于批量设置多个响应式数据。
    const stateAsRefs = toRefs(state); // 将响应式的对象变为普通对象结构
    stateAsRefs.student.value.age = 100;
    // The ref and the original property is "linked"
    state.foo++;
    // console.log(stateAsRefs.foo.value); // 2
    // let aa = toRefs(
    //   reactive({
    //     foo1: 1,
    //     bar1: 2,
    //   })
    // );
    // // 对响应式对象进行 toRefs 后，可以对其进行解构方便 vue 模版使用，但是不会使其失去响应性
    // const { foo1, bar1 } = aa;
    // stateAsRefs.foo.value++;
    // console.log(state.foo); // 3
    // toRefs()将响应式的对象 state 变为普通对象 stateAsRefs 后，return 时使用 ES6 的扩展运算符，在模版中可以直接使用其内部属性，且仍具有响应性
    return { state, stateAsRefs, ...stateAsRefs, addone };
    // return { state, ...stateAsRefs, foo1, bar1 };
  },
};
</script>
